<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>

    <div id="app">
      <cp1></cp1>
      <component is="cp2"></component>
    </div>

        
    
    <script>
        
        // 通过给Vue的原型属性设置一些其他的属性 我们所有的组件就可以通过 this来访问到扩展的属性
        Vue.prototype.a = 123
        Vue.prototype.$api = axios;

        Vue.component('cp1',{
            name:'cp1',
            template:`
                <div>
                    我是cp1组件
                    <button @click="fn1">cp1 打印 this.a</button>  
                </div>
            `,
            methods:{
                fn1(){
                    console.log( this)
                    console.log('this.a',this.a)
                    
                }
            }
          
        })


        Vue.component('cp2',{
            name:'cp2',
            template:`
                <div>
                    我是cp2组件
                    <button @click="fn1">cp2 打印 this.a</button>  
                </div>
            `,
            
            methods:{
                fn1(){
                    console.log('this.a',this.a)
                }
            }
          
        })

        Vue.component('cp3',{
            name:'cp3',
            template:`
                <div>
                    我是cp3组件
                </div>
            `,
         
        })
    
        const app = new Vue({
            el: '#app',
            data:{
                curCp:'cp1',
                alives: [ ]
            }
        })

    </script>

</body>
</html>